var ui = ( function() {

    var KAccordionElement       = "<div id=\"accordion\"></div>"
    var KAccordionPanelElement  = "<h3 id=\"%HEADER_ID%\">%TITLE%</h3><div id=\"%CONTENT_ID%\"></div>";
    function UI($parentElement) {
        this.m$parentElement = $parentElement;
    }

    UI.prototype.init = function(title) {
        this.m$parentElement.append(KAccordionElement);
        return this.addPanel(title);
    }

    UI.prototype.addPanel = function(title) {
        return new Panel(this, title, {
            add     : true,
            redraw  : true
        });
    }

    UI.prototype.redraw = function(panel) {
        if (this.mCreated) {
            $('#accordion').accordion('destroy').accordion({ heightStyle: "fill" });
        } else {
            $('#accordion').accordion({ heightStyle: "fill" });
            this.mCreated = true;
        }
    }





    var gId = 0;
    function Panel(ui, title, params) {
        this.mUI = ui;
        this.mId = gId++;
        this.newPanelContent = KAccordionPanelElement
                .replace("%HEADER_ID%", "header"+this.mId)
                .replace("%CONTENT_ID%", "content"+this.mId)
                .replace("%TITLE%", title);
        if (params && params.add) {
            this.add(params.redraw);
        }
    }

    Panel.prototype.contentElement = function() {
        return $('#accordion #content'+this.mId);
    }

    Panel.prototype.headerElement = function() {
        return $('#accordion #header'+this.mId);
    }

    Panel.prototype.remove = function(redraw) {
        this.contentElement().remove();
        this.headerElement().remove();
        if (redraw) {
            this.mUI.redraw();
        }
    }

    Panel.prototype.add = function(redraw) {
        $('#accordion').append(this.newPanelContent);
        if (redraw) {
            this.mUI.redraw();
        }
    }

    Panel.prototype.setTitle = function(title) {
        this.headerElement().text(title);
    }

    Panel.prototype.clear = function(title) {
        this.contentElement().empty();
    }

    Panel.prototype.on = function(event, cb) {
        var self = this;
        var thisHeader = this.headerElement();
        switch (event) {
            case 'opening':
                $('#accordion').on("accordionbeforeactivate", function(e, ui) {
                    if (ui.newHeader.get(0)==thisHeader.get(0)) {
                        cb();
                    }
                });
                break;
            case 'open':
                $('#accordion').on("accordionactivate", function(e, ui) {
                    if (ui.newHeader.get(0)==thisHeader.get(0)) {
                        cb();
                    }
                });
                break;
            case 'closing':
                $('#accordion').on("accordionbeforeactivate", function(e, ui) {
                    if (ui.oldHeader.get(0)==thisHeader.get(0)) {
                        cb();
                    }
                });
                break;
            case 'closed':
                $('#accordion').on("accordionactivate", function(e, ui) {
                    if (ui.oldHeader.get(0)==thisHeader.get(0)) {
                        cb();
                    }
                });
                break;
            default:
                throw new Error("An attempt to register for an unknown Panel's event: '"+event+"'");
        }
    }

    return {
        UI : UI,
        Panel : Panel
    };
})();

/*<form style="margin-top: 1em;">
    <div id="radioset">
        <input type="radio" id="radio1" name="radio"><label for="radio1">Italiano</label>
        <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">German</label>
        <input type="radio" id="radio3" name="radio"><label for="radio3">Spanish</label>
    </div>
</form>*/